/* ===================================================== */ /* */ /* 🚀 FEATURES SECTION START 🚀 */ /* */ /* ===================================================== */ /* ===================================================== */ /* */ /* FEATURES MAIN SECTION */ /* */ /* ===================================================== */ .features-section{ position:relative; width:100%; overflow:hidden; padding:120px 80px; box-sizing:border-box; } /* ===================================================== */ /* */ /* FEATURES CONTAINER */ /* */ /* ===================================================== */ .features-container{ width:100%; max-width:1600px; margin:auto; position:relative; z-index:2; box-sizing:border-box; padding:70px; border-radius:40px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.08); backdrop-filter:blur(20px); } /* ===================================================== */ /* */ /* FEATURES HEADER */ /* */ /* ===================================================== */ .features-header{ width:100%; max-width:900px; margin:0 auto 80px; text-align:center; } /* ===================================================== */ /* */ /* TOP BADGE */ /* */ /* ===================================================== */ .features-badge{ color:white; font-size:72px; font-weight:800; margin-bottom:20px; text-shadow: 0 0 20px rgba(0,255,238,.25); } /* ===================================================== */ /* */ /* MAIN TITLE */ /* */ /* ===================================================== */ .features-header h2{ color:#d7e3ff; font-size:26px; font-weight:500; line-height:1.8; max-width:900px; margin:auto; } /* ===================================================== */ /* */ /* DESCRIPTION */ /* */ /* ===================================================== */ .features-header p{ color:#a7b5c9; font-size:1.08rem; line-height:2; max-width:760px; margin:auto; } /* ===================================================== */ /* */ /* NEON LINE */ /* */ /* ===================================================== */ .features-line{ width:140px; height:4px; margin:40px auto 0; border-radius:50px; background:linear-gradient( 90deg, #00F5FF, #8B5CF6, #00F5FF ); box-shadow: 0 0 20px #00F5FF, 0 0 40px rgba(0,245,255,.35); } /* ===================================================== */ /* */ /* MAIN CONTENT LAYOUT */ /* */ /* ===================================================== */ .features-content{ display:grid; grid-template-columns:700px 1fr; gap:40px; align-items:start; } /* ===================================================== */ /* */ /* FEATURES GRID */ /* */ /* ===================================================== */ .features-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } /* ===================================================== */ /* */ /* RIGHT PREVIEW PANEL */ /* */ /* ===================================================== */ .feature-preview{ position:sticky; top:120px; min-height:760px; } /* ===================================================== */ /* */ /* TABLET RESPONSIVE */ /* */ /* ===================================================== */ @media(max-width:1100px){ .features-content{ grid-template-columns:1fr; } .feature-preview{ position:relative; top:0; min-height:auto; margin-top:40px; } .features-container{ padding:40px; } } /* ===================================================== */ /* */ /* MOBILE RESPONSIVE */ /* */ /* ===================================================== */ @media(max-width:768px){ .features-section{ padding:80px 15px; } .features-header h2{ font-size:2rem; } .features-header p{ font-size:.95rem; line-height:1.9; } .features-grid{ grid-template-columns:1fr; } .features-container{ padding:25px; border-radius:26px; } } /* ===================================================== */ /* */ /* 🚀 FEATURE CARDS START 🚀 */ /* */ /* ===================================================== */ /* ===================================================== */ /* */ /* FEATURE CARD */ /* */ /* ===================================================== */ .feature-card{ position:relative; overflow:hidden; cursor:pointer; border-radius:24px; padding: 20px; background:rgba(255,255,255,.04); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.08); transition:.45s ease; } /* ===================================================== */ /* */ /* TOP GLOW EFFECT */ /* */ /* ===================================================== */ .feature-card::before{ content:""; position:absolute; top:-120px; left:-120px; width:220px; height:220px; border-radius:50%; background:rgba(0,245,255,.12); filter:blur(60px); transition:.5s; } /* ===================================================== */ /* */ /* BORDER ANIMATION */ /* */ /* ===================================================== */ .feature-card::after{ content:""; position:absolute; inset:0; border-radius:26px; padding:1px; background:linear-gradient( 135deg, rgba(0,245,255,.5), rgba(139,92,246,.45), rgba(0,245,255,.25) ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:.4s; } /* ===================================================== */ /* */ /* HOVER */ /* */ /* ===================================================== */ .feature-card:hover{ transform:translateY(-8px); border-color:rgba(0,245,255,.25); box-shadow: 0 20px 40px rgba(0,0,0,.35), 0 0 25px rgba(0,245,255,.18); } .feature-card:hover::before{ transform:scale(1.4); } .feature-card:hover::after{ opacity:1; } /* ===================================================== */ /* */ /* ACTIVE CARD */ /* */ /* ===================================================== */ /* ===================================================== */ /* */ /* ACTIVE FEATURE CARD EFFECT */ /* */ /* ===================================================== */ .feature-card.active{ transform:translateY(-10px) scale(1.03); border-color:#00F5FF; border:1px solid rgba(0,245,255,.45); background:rgba(255,255,255,.06); box-shadow: 0 15px 35px rgba(0,0,0,.45), 0 0 25px rgba(0,245,255,.25), 0 0 70px rgba(0,245,255,.08); } /* ===================================================== */ /* */ /* ACTIVE ICON EFFECT */ /* */ /* ===================================================== */ .feature-card.active .feature-icon{ background:linear-gradient( 135deg, rgba(0,245,255,.18), rgba(139,92,246,.18) ); border-color:#00F5FF; transform:scale(1.12); box-shadow: 0 0 25px rgba(0,245,255,.25); } /* ===================================================== */ /* */ /* ACTIVE MINI TITLE EFFECT */ /* */ /* ===================================================== */ .feature-card.active .feature-mini-title{ color:#ffffff; text-shadow: 0 0 12px rgba(0,245,255,.6); } /* ===================================================== */ /* */ /* ACTIVE TITLE EFFECT */ /* */ /* ===================================================== */ .feature-card.active h3{ color:#00F5FF; } /* ===================================================== */ /* */ /* ACTIVE TOP GLOW */ /* */ /* ===================================================== */ .feature-card.active::before{ transform:scale(1.6); opacity:1; } /* ===================================================== */ /* */ /* FEATURE ICON */ /* */ /* ===================================================== */ .feature-icon{ width:70px; height:70px; display:flex; align-items:center; justify-content:center; border-radius:20px; font-size:30px; background:rgba(0,245,255,.08); border:1px solid rgba(0,245,255,.25); margin-bottom:25px; transition:.45s; } .feature-card:hover .feature-icon{ transform: rotate(8deg) scale(1.12); } /* ===================================================== */ /* */ /* MINI TITLE */ /* */ /* ===================================================== */ .feature-mini-title{ display:inline-block; margin-bottom:14px; color:#00F5FF; font-size:.78rem; font-weight:700; letter-spacing:2px; } /* ===================================================== */ /* */ /* CARD TITLE */ /* */ /* ===================================================== */ .feature-card h3{ color:#ffffff; font-size:1.35rem; margin-bottom:18px; line-height:1.5; } /* ===================================================== */ /* */ /* CARD TEXT */ /* */ /* ===================================================== */ .feature-card p{ color:#AAB7CF; line-height:1.9; font-size:.96rem; } /* ===================================================== */ /* */ /* FLOATING ANIMATION */ /* */ /* ===================================================== */ @keyframes floatCard{ 0%{ transform:translateY(0px); } 50%{ transform:translateY(-4px); } 100%{ transform:translateY(0px); } } .feature-card{ animation:floatCard 5s ease-in-out infinite; } /* ===================================================== */ /* */ /* DIFFERENT DELAY FOR EACH CARD */ /* */ /* ===================================================== */ .feature-card:nth-child(2){ animation-delay:.3s; } .feature-card:nth-child(3){ animation-delay:.6s; } .feature-card:nth-child(4){ animation-delay:.9s; } .feature-card:nth-child(5){ animation-delay:1.2s; } .feature-card:nth-child(6){ animation-delay:1.5s; } .feature-card:nth-child(7){ animation-delay:1.8s; } .feature-card:nth-child(8){ animation-delay:2.1s; } /* ===================================================== */ /* */ /* 🚀 FEATURE PREVIEW PANEL START 🚀 */ /* */ /* ===================================================== */ /* ===================================================== */ /* */ /* FEATURE PREVIEW PANEL */ /* */ /* ===================================================== */ .feature-preview{ position:sticky; top:120px; min-height:760px; border-radius:32px; padding:45px; overflow:hidden; background:rgba(255,255,255,.04); backdrop-filter:blur(25px); -webkit-backdrop-filter:blur(25px); border:1px solid rgba(255,255,255,.08); box-shadow: 0 20px 60px rgba(0,0,0,.35); } /* ===================================================== */ /* */ /* PANEL BACKGROUND GLOW */ /* */ /* ===================================================== */ .feature-preview::before{ content:""; position:absolute; width:420px; height:420px; right:-180px; top:-180px; border-radius:50%; background:rgba(0,245,255,.12); filter:blur(90px); z-index:0; } .feature-preview::after{ content:""; position:absolute; width:300px; height:300px; left:-120px; bottom:-120px; border-radius:50%; background:rgba(139,92,246,.10); filter:blur(80px); z-index:0; } /* ===================================================== */ /* */ /* PANEL CONTENT */ /* */ /* ===================================================== */ .feature-preview>*{ position:relative; z-index:2; } /* ===================================================== */ /* */ /* EMPTY STATE */ /* */ /* ===================================================== */ .preview-empty{ height:100%; min-height:650px; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; } /* ===================================================== */ /* */ /* EMPTY ICON */ /* */ /* ===================================================== */ .empty-icon{ width:120px; height:120px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:60px; margin-bottom:35px; background:rgba(0,245,255,.08); border:1px solid rgba(0,245,255,.18); box-shadow: 0 0 40px rgba(0,245,255,.15); } /* ===================================================== */ /* */ /* EMPTY TITLE */ /* */ /* ===================================================== */ .preview-empty h2{ color:#ffffff; font-size:2rem; margin-bottom:20px; } /* ===================================================== */ /* */ /* EMPTY DESCRIPTION */ /* */ /* ===================================================== */ .preview-empty p{ max-width:420px; color:#AAB7CF; line-height:2; } /* ===================================================== */ /* */ /* CONTENT (DEFAULT HIDDEN) */ /* */ /* ===================================================== */ .preview-content{ display:none; } /* ===================================================== */ /* */ /* TOP BADGE */ /* */ /* ===================================================== */ .preview-badge{ display:inline-flex; padding:8px 18px; border-radius:30px; margin-bottom:25px; background:rgba(0,245,255,.08); border:1px solid rgba(0,245,255,.18); color:#00F5FF; font-size:.80rem; font-weight:700; letter-spacing:2px; } /* ===================================================== */ /* */ /* BIG ICON */ /* */ /* ===================================================== */ .preview-icon{ width:100px; height:100px; display:flex; align-items:center; justify-content:center; font-size:48px; border-radius:28px; margin-bottom:30px; background:rgba(0,245,255,.08); border:1px solid rgba(0,245,255,.25); } /* ===================================================== */ /* */ /* 🚀 FEATURE PREVIEW CONTENT START 🚀 */ /* */ /* ===================================================== */ /* ===================================================== */ /* */ /* PREVIEW TITLE */ /* */ /* ===================================================== */ .preview-title{ color:#ffffff; font-size:2.2rem; font-weight:800; line-height:1.4; margin-bottom:20px; } /* ===================================================== */ /* */ /* PREVIEW DESCRIPTION */ /* */ /* ===================================================== */ .preview-description{ color:#AAB7CF; font-size:1rem; line-height:2; margin-bottom:35px; } /* ===================================================== */ /* */ /* DIVIDER */ /* */ /* ===================================================== */ .preview-divider{ width:100%; height:1px; margin:35px 0; background:linear-gradient( 90deg, transparent, rgba(0,245,255,.45), rgba(139,92,246,.35), transparent ); } /* ===================================================== */ /* */ /* FEATURE LIST */ /* */ /* ===================================================== */ .preview-list{ list-style:none; padding:0; margin:0 0 40px; } /* ===================================================== */ /* */ /* FEATURE ITEM */ /* */ /* ===================================================== */ .preview-list li{ display:flex; align-items:center; gap:14px; padding:14px 0; color:#ffffff; font-size:1rem; border-bottom:1px solid rgba(255,255,255,.05); } /* ===================================================== */ /* */ /* CHECK ICON */ /* */ /* ===================================================== */ .preview-list li::before{ content:"✔"; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#00F5FF; background:rgba(0,245,255,.08); border:1px solid rgba(0,245,255,.18); flex-shrink:0; } /* ===================================================== */ /* */ /* PROGRESS SECTION */ /* */ /* ===================================================== */ .preview-progress{ margin:40px 0; } /* ===================================================== */ /* */ /* PROGRESS HEADER */ /* */ /* ===================================================== */ .progress-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; color:#ffffff; font-weight:600; } /* ===================================================== */ /* */ /* PROGRESS BAR */ /* */ /* ===================================================== */ .progress-bar{ width:100%; height:12px; overflow:hidden; border-radius:50px; background:rgba(255,255,255,.06); } /* ===================================================== */ /* */ /* PROGRESS FILL */ /* */ /* ===================================================== */ .progress-fill{ width:0%; height:100%; border-radius:50px; background:linear-gradient( 90deg, #00F5FF, #8B5CF6 ); box-shadow: 0 0 15px rgba(0,245,255,.45); } /* ===================================================== */ /* */ /* PREVIEW BUTTON */ /* */ /* ===================================================== */ .preview-button{ width:100%; height:60px; border:none; outline:none; cursor:pointer; border-radius:18px; color:#ffffff; font-size:1rem; font-weight:700; transition:.35s; background:linear-gradient( 135deg, #00F5FF, #8B5CF6 ); } /* ===================================================== */ /* */ /* BUTTON HOVER */ /* */ /* ===================================================== */ .preview-button:hover{ transform:translateY(-3px); box-shadow: 0 12px 30px rgba(0,245,255,.25); } /* ===================================================== */ /* */ /* MOBILE RESPONSIVE */ /* */ /* ===================================================== */ @media(max-width:768px){ .feature-preview{ padding:30px; } .preview-title{ font-size:1.7rem; } .preview-icon{ width:85px; height:85px; font-size:40px; } } /* ===================================================== */ /* */ /* 🚀 FEATURE ANIMATIONS & STATES 🚀 */ /* */ /* ===================================================== */ /* ===================================================== */ /* */ /* CONTENT VISIBLE STATE */ /* */ /* ===================================================== */ .preview-content{ opacity:0; transform:translateY(20px); transition: opacity .45s ease, transform .45s ease; } .preview-content.show{ display:block; opacity:1; transform:translateY(0); } /* ===================================================== */ /* */ /* EMPTY STATE HIDDEN */ /* */ /* ===================================================== */ .preview-empty.hide{ display:none; } /* ===================================================== */ /* */ /* FEATURE CARD CLICK */ /* */ /* ===================================================== */ .feature-card{ user-select:none; } /* ===================================================== */ /* */ /* ICON FLOAT */ /* */ /* ===================================================== */ @keyframes iconFloat{ 0%{ transform:translateY(0px); } 50%{ transform:translateY(-6px); } 100%{ transform:translateY(0px); } } .preview-icon{ animation:iconFloat 4s ease-in-out infinite; } /* ===================================================== */ /* */ /* EMPTY ICON ROTATE */ /* */ /* ===================================================== */ @keyframes emptyRotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } .empty-icon{ animation: emptyRotate 12s linear infinite; } /* ===================================================== */ /* */ /* PANEL FLOATING */ /* */ /* ===================================================== */ @keyframes panelFloat{ 0%{ transform:translateY(0px); } 50%{ transform:translateY(-3px); } 100%{ transform:translateY(0px); } } .feature-preview{ animation:panelFloat 7s ease-in-out infinite; } /* ===================================================== */ /* */ /* BUTTON SHINE EFFECT */ /* */ /* ===================================================== */ .preview-button{ position:relative; overflow:hidden; } .preview-button::before{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; transform:skewX(-25deg); background: rgba(255,255,255,.25); } .preview-button:hover::before{ left:150%; transition:.8s; }